<template>
  <div>
    <!-- 注册局部组件 -->
    <ComponentA />
    <ComponentB />
    <!-- 或者 -->
    <component-a />
    <component-b />
    <!-- 或者 -->
    <ComponentA></ComponentA>
    <ComponentB></ComponentB>
    <component-a></component-a>
    <component-b></component-b>
    <hr />
    <!-- 组件全局注册 -->
    <global-com />
    <global-use />
    <div>value:{{ value }}</div>
    <button @click="handClick">改变value的值</button>
  </div>
</template>

<script>
import ComponentA from './components/component-a'
import ComponentB from './components/ComponentB'
export default {
  name: 'page-day18',
  components: { ComponentA, ComponentB },
  data() {
    return {
      value: 1
    }
  },
  methods: {
    handClick() {
      this.value = 2
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<style lang="scss" scoped></style>
